<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-07-14 15:08:24
 * @LastEditors: wangjx
 * @LastEditTime: 2022-01-10 20:36:27
-->
<template>
  <div ref="bottom1_container" style="height: 95%"></div>
</template>

<script>
import {get} from "../../../utils/request";
import {Column} from '@antv/g2plot';

export default {
  data() {
    return{
      dataArr:[ ]
    }
  },
  //请求到数据，但还没有挂在到页面上
  created(){    

  },
  //请求到数据 且挂在，进行重构，绘制图像
  mounted(){    
    this.initData()

  },
  methods:{
    //数据获取
    initData(){
        get('/dashboard/queryEngineerBindDeviceNumber').then(res =>{
          console.log(5555,res);
          this.dataArr = res.data;
          this.initChart();
        })
    },

    initChart(){

      //3.创建一个折线图实例对象 
      // <=>const line = new Line('container',{}
     const columnPlot = new Column(this.$refs.bottom1_container, {
  data:this.dataArr,  //data,<=> data:data
  xField: 'type',
  yField: 'value',
  label: {
    // 可手动配置 label 数据标签位置
    position: 'middle', // 'top', 'bottom', 'middle',
    // 配置样式
    style: {
      fill: '#FFFFFF',
      opacity: 0.6,
    },
  },
  xAxis: {
    label: {
      rotate:101,
      offset:25
    },
  },
  
});

columnPlot.render();


    }

  }
}
</script>